<template>
  <div>
    <el-tabs type="border-card" class="el-tabs--shadowless">
      <el-tab-pane label="企业纳税">
        <el-echarts theme="macarons" :option="optionTax" :height="chartHeight"></el-echarts>
      </el-tab-pane>
      <el-tab-pane label="企业公共事业缴费">
        <el-echarts theme="macarons" :option="optionCommonBus" :height="chartHeight"></el-echarts>
      </el-tab-pane>
      <el-tab-pane label="企业工商年报">
        <el-echarts theme="macarons" :option="optionYearBus" :height="chartHeight"></el-echarts>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    const currentYear = new Date().getFullYear()
    return {
      chartHeight: 270,
      optionTax: {
        title: {
          text: '近三年企业纳税趋势',
          textStyle: {
            color: '#333',
            fontWeight: 'bolder',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['企业纳税'],
          right: true,
        },
        xAxis: {
          type: 'category',
          data: [currentYear - 2, currentYear - 1, currentYear],
        },
        yAxis: {
          type: 'value',
          name: '金额(万元)',
        },
        series: [
          {
            name: '企业纳税',
            data: [8200, 9320, 9010],
            type: 'line',
            smooth: true,
            label: { show: true },
          },
        ],
      },
      optionCommonBus: {
        title: {
          text: '近三年企业公共事业缴费',
          textStyle: {
            color: '#333',
            fontWeight: 'bolder',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['水费', '电费', '燃气费'],
          right: true,
        },
        xAxis: {
          type: 'category',
          data: [currentYear - 2, currentYear - 1, currentYear],
        },
        yAxis: {
          type: 'value',
          name: '金额(万元)',
        },
        series: [
          {
            name: '水费',
            data: [90, 72, 66],
            type: 'line',
            smooth: true,
            label: { show: true },
          },
          {
            name: '电费',
            data: [5, 62, 76],
            type: 'line',
            smooth: true,
            label: { show: true },
          },
          {
            name: '燃气费',
            data: [50, 10, 66],
            type: 'line',
            smooth: true,
            label: { show: true },
          },
        ],
      },
      optionYearBus: {
        title: {
          text: '近三年企业工商年报趋势',
          textStyle: {
            color: '#333',
            fontWeight: 'bolder',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['营业收入', '营业利润'],
          right: true,
        },
        xAxis: {
          type: 'category',
          data: [currentYear - 2, currentYear - 1, currentYear],
        },
        yAxis: {
          type: 'value',
          name: '金额(万元)',
        },
        series: [
          {
            name: '营业收入',
            data: [5, 73, 16],
            type: 'line',
            label: { show: true },
          },
          {
            name: '营业利润',
            data: [60, 5, 75],
            type: 'line',
            label: { show: true },
          },
        ],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped></style>
